<template>
  <div class="supervision-center">
    <div class="MidTitle">
      <span>基财e码通驾驶舱-资金监管
        <!-- <span style="color: #f6bd16;">(柯桥区)</span> -->
        <el-select v-model="areaValue" placeholder="请选择" @change="gotoArea">
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </span>
    </div>
    <div class="MidTop">
      <div class="MidtopCon">
        <div
          v-for="(item, index) in midTopList"
          :key="index"
          class="MidTopBtn"
          @click="openTopDailg(index)"
        >
          <!-- <span class="MidTopBtn-titleM">{{ item.titleM }}:&nbsp;&nbsp;</span> -->
          <span>{{ item.num }}</span>
          <p>{{ item.title }}</p>
        </div>
        <span class="timeData">{{ gettime }} {{ week }}</span>
        <div class="danwei">单位：万元</div>
      </div>
    </div>
    <div class="MidMap">
      <div style="height:100%">
        <div class="mapTitle">整体风险评价</div>
        <map-echarts />
      </div>
    </div>
    <div class="MipTable">
      <!-- <div class="title">按月份风险统计数量</div> -->
      <!-- <VEcharts
        autoresize
        :options="option.options"
        style="width: 100%; height: 90%"
      /> -->
      <left-item
        v-for="(item, index) in list"
        :key="index"
        style="width:48%"
        :item="item"
        @openDailg="openDailg(index)"
      />
    </div>
    <a-modal
      :visible="dbclickVisible"
      :title="modalTitle"
      width="90vw"
      class="dbclickModal"
      :body-style="{ height: '500px' }"
      cancel-text="取消"
      ok-text="确定"
      @ok="dbclickOk"
      @cancel="dbclickCancel"
    >
      <!-- <table-common :menu-id="menuId" :filter-list="leftFilterList" /> -->
      <div v-if="modalFlag === 'botright'" class="table1Modal11">
        <table1 :table1="tableList1" :headers-list="tableHeaderData.list5" />
      </div>
      <div v-if="modalFlag === 'topleft'" class="table1Modal1">
        <div class="table1Modal1Left">
          <h1>{{ modalConTitle }}<span>(单位:万元)</span></h1>
          <div class="table1ModalBot">
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list1"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list2"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list3"
              />
            </div>
            <div class="ModalItem">
              <table1
                :table1="tableList1"
                :headers-list="tableHeaderData.list4"
              />
            </div>
          </div>
        </div>
        <div class="table1Modal1right">
          <VEcharts
            autoresize
            :options="optModal"
            style="width: 100%; height: 90%"
          />
        </div>
      </div>
      <div v-if="modalFlag === 'topmid'" class="table1Modal">
        <div class="table1Modal1Left">
          <h1>{{ modalConTitle }}<span>(单位:万元)</span></h1>
          <div class="table1ModalBot">
            <div
              v-for="(item, index) in tableHeaderData.list6.data"
              :key="index"
              class="ModalItem"
            >
              <table1 :table1="tableList1" :headers-list="item" />
            </div>
          </div>
        </div>
        <div class="table1Modal1right">
          <VEcharts
            autoresize
            :options="optModal"
            style="width: 100%; height: 90%"
          />
        </div>
      </div>
      <!-- <div class="table1Modal" v-if="modalFlag === 'topleft'">
        <table1 :table1="tableList1" :headersList="tableHeaderData.list7" />
      </div> -->
      <div v-if="modalFlag === 'botleft'" class="table1Modal11">
        <table1 :table1="tableList1" :headers-list="tableHeaderData.list8" />
      </div>
      <template slot="footer">
        <span style="color:#0a1c37">1</span>
      </template>
    </a-modal>
  </div>
</template>

<script>
import MapEcharts from './mapecharts';
import VEcharts from '@/components/vecharts';
import LeftItem from './LeftItem';
import {
  getQueryBodyByProduce,
  getReportHeaderByTableId
} from '@/api/dynamicInterface';
import table1 from './tabble/table';
export default {
  components: {
    VEcharts,
    MapEcharts,
    LeftItem,
    table1
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      midTopList: [
        {
          num: '891236.28',
          title: '资金',
          titleM: '公示率'
        },
        {
          num: '258445.49',
          title: '资产',
          titleM: '监管率'
        },
        {
          num: '-',
          title: '资源',
          titleM: '巡查率'
        }
      ],
      option: {
        title: '六大经济活动',
        options: {
          // title: {
          // text: '按月份风险统计数量',
          // subtext: '单位: 万元',
          // x: 100
          // },
          xAxis: {
            type: 'category',
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月'
            ]
            // axisLine: {// x轴样式
            //   show: true,
            //   lineStyle: {
            //     color: '#00c7ff',
            //     width: 1,
            //     type: 'solid'
            //   }
            // }
            // splitLine: {
            //   show: false
            // }
          },
          yAxis: {
            type: 'value',
            // 去掉横向网格线
            splitLine: {
              show: false
            }
          },
          tooltip: {
            // 鼠标滑上去显示效果
            trigger: 'item'
          },
          grid: {
            show: false, // 是否显示直角坐标系网格
            top: 20, // 相对位置 top\bottom\left\right
            bottom: 30,
            left: 40,
            right: 40
            // containLabel: false // gird 区域是否包含坐标轴的刻度标签
            // tooltip: {
            //   show: true,
            //   trigger: 'item', // 触发类型
            //   textStyle: {
            //     color: '#666'
            //   }
            // }
          },
          series: [
            {
              data: [60, 70, 10, 80, 70, 75, 65, 12, 0, 0, 0, 0],
              // data: this.mouthData,
              type: 'bar',
              itemStyle: {
                normal: {
                  // 柱子颜色
                  color: ['#0C657D']
                }
              }
            }
          ]
        }
      },
      areaOptions: [
        {
          label: '浙江省',
          value: 1
        },
        {
          label: '绍兴市',
          value: 2
        },
        {
          label: '柯桥区',
          value: 3
        },
        {
          label: '齐贤街道',
          value: 4
        }
      ],
      areaValue: 3,
      dbclickVisible: false,
      tableHeaderData: {
        list5: {
          // botright
          height: '400px',
          data: [
            {
              ZD: 'XH',
              label: '序号',
              width: 120
            },
            {
              ZD: 'IYEAR',
              label: '年度',
              width: 120
            },
            {
              ZD: 'SJZJFL',
              label: '转移支付类型'
            },
            {
              ZD: 'FILENO',
              label: '发文文号'
            },
            {
              ZD: 'FILEDATE',
              label: '发文日期'
            },
            {
              ZD: 'DDATE',
              label: '拨付日期'
            },
            {
              ZD: 'CENTERPRISENAME',
              label: '上级单位名称',
              width: 130
            },
            {
              ZD: 'CPROGRAMNAME',
              label: '项目名称'
            },
            {
              ZD: 'IMONEY',
              label: '金额'
            }
            // {
            //   ZD: "CRECBANKNAME",
            //   label: "收款银行"
            // },
            // {
            //   ZD: "CRECBANKNO",
            //   label: "收款账号"
            // },
            // {
            //   ZD: "CRECNAME",
            //   label: "收款人"
            // },
            // {
            //   ZD: "CBILLNO",
            //   label: "支付令号",
            //   width: 100
            // },
            // {
            //   ZD: "IMONTH",
            //   label: "月份",
            //   width: 70
            // }
          ]
        },
        list6: {
          // topmid
          // height: "400px",
          data: [
            {
              data: [
                {
                  ZD: 'SBJJLZMJZ',
                  label: '设备家具类账面净值',
                  size: true
                }
              ]
            },
            {
              data: [
                {
                  ZD: 'FCLZMJZ',
                  label: '房产类账面净值',
                  size: true
                }
              ]
            },
            {
              data: [
                {
                  ZD: 'TDLZMJZ',
                  label: '土地类帐面净值',
                  size: true
                }
              ]
            },
            {
              data: [
                {
                  ZD: 'ZJGCLLJYTZE',
                  label: '在建工程类累计已投资额',
                  size: true
                }
              ]
            },
            {
              data: [
                {
                  ZD: 'CLLZMJZ',
                  label: '车辆类帐面净值',
                  size: true
                }
              ]
            },
            {
              data: [
                {
                  ZD: 'GGSSLZMJZ',
                  label: '公共设施类账面净值',
                  size: true
                }
              ]
            }
            // {
            //   ZD: "ZJ",
            //   label: "镇街"
            // },
            // {
            //   ZD: "SBJJLZMJZ",
            //   label: "设备家具类账面净值"
            // },
            // {
            //   ZD: "FCLZMJZ",
            //   label: "房产类账面净值"
            // },
            // {
            //   ZD: "TDLZMJZ",
            //   label: "土地类帐面净值"
            // },
            // {
            //   ZD: "ZJGCLLJYTZE",
            //   label: "	在建工程类累计已投资额"
            // },
            // {
            //   ZD: "CLLZMJZ",
            //   label: "车辆类帐面净值"
            // },
            // {
            //   ZD: "GGSSLZMJZ",
            //   label: "公共设施类账面净值"
            // },
            // {
            //   ZD: "HJ",
            //   label: "合计"
            // }
          ]
        },
        list7: {
          // topleft
          header: true,
          height: '400',
          data: [
            {
              ZD: 'DW',
              label: '单位'
            },
            {
              ZD: 'ND',
              label: '年度'
            },
            {
              ZD: 'ZJ',
              label: '总计'
            },
            {
              title: '财政拨款收入',
              data: [
                {
                  ZD: 'CZBKSRXJ',
                  label: '小计',
                  width: 100
                },
                {
                  ZD: 'YBYSZXBZ',
                  label: '一般预算专项补助'
                },
                {
                  ZD: 'TZJSSR',
                  label: '体制结算收入(年初预算）'
                }
              ]
            },
            {
              title: '镇街本级收入',
              data: [
                {
                  ZD: 'ZJBJSRXJ',
                  label: '小计',
                  width: 100
                },
                {
                  ZD: 'ZCCZSR',
                  label: '资产出租收入'
                },
                {
                  ZD: 'ZCCSSR',
                  label: '资产出售收入'
                },
                {
                  ZD: 'GMCSSR',
                  label: '公墓出售收入'
                },
                {
                  ZD: 'CKLXSR',
                  label: '存款利息收入'
                },
                {
                  ZD: 'CQXGSR',
                  label: '拆迁相关收入'
                },
                {
                  ZD: 'ZJDBJSR',
                  label: '宅基地补缴收入'
                },
                {
                  ZD: 'ZYJJSRQT',
                  label: '其他',
                  width: 100
                }
              ]
            },
            {
              title: '专用基金收入',

              data: [
                {
                  ZD: 'TDCRJSY',
                  label: '土地出让金收益'
                },
                {
                  ZD: 'ZYJJSRQT',
                  label: '其他',
                  width: 100
                },
                {
                  ZD: 'ZYJJSRXJ',
                  label: '小计',
                  width: 100
                },
                {
                  ZD: 'QJBMZB',
                  label: '区级部门转拨'
                }
              ]
            },
            {
              title: '其他政府资金',
              data: [
                {
                  ZD: 'QTZFZJXJ',
                  label: '小计',
                  width: 100
                },
                {
                  ZD: 'BZJ',
                  label: '保证金'
                },
                {
                  ZD: 'CQPCK',
                  label: '拆迁赔偿款'
                },
                {
                  ZD: 'DJGCK',
                  label: '代建工程款'
                },
                {
                  ZD: 'QTZFZJQT',
                  label: '其他',
                  width: 100
                }
              ]
            }
          ]
        },
        list8: {
          // botleft
          height: '400px',
          data: []
        },
        list1: {
          // title: "财政拨款收入",
          // height: "180px",
          data: [
            {
              ZD: 'CZBKSRXJ',
              label: '财政拨款收入',
              size: true
            }
            // {
            //   ZD: "DW",
            //   label: "单位"
            // },
            // {
            //   ZD: "CZBKSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "YBYSZXBZ",
            //   label: "一般预算专项补助"
            // },
            // {
            //   ZD: "TZJSSR",
            //   label: "体制结算收入(年初预算）"
            // }
          ]
        },
        list2: {
          // title: "镇街本级收入",
          // height: "180px",

          data: [
            {
              ZD: 'ZJBJSRXJ',
              label: '镇街本级收入',
              size: true
            }
            // {
            //   ZD: "ZJBJSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "ZCCZSR",
            //   label: "资产出租收入"
            // },
            // {
            //   ZD: "ZCCSSR",
            //   label: "资产出售收入"
            // },
            // {
            //   ZD: "GMCSSR",
            //   label: "公墓出售收入"
            // },
            // {
            //   ZD: "CKLXSR",
            //   label: "存款利息收入"
            // },
            // {
            //   ZD: "CQXGSR",
            //   label: "拆迁相关收入"
            // },
            // {
            //   ZD: "ZJDBJSR",
            //   label: "宅基地补缴收入"
            // },
            // {
            //   ZD: "ZYJJSRQT",
            //   label: "其他",
            //   width: 100
            // }
          ]
        },
        list3: {
          // title: "专用基金收入",
          // height: "180px",

          data: [
            {
              ZD: 'ZYJJSRXJ',
              label: '专用资金收入',
              size: true
            }
            // {
            //   ZD: "TDCRJSY",
            //   label: "土地出让金收益"
            // },
            // {
            //   ZD: "ZYJJSRQT",
            //   label: "其他",
            //   width: 100
            // },
            // {
            //   ZD: "ZYJJSRXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "QJBMZB",
            //   label: "区级部门转拨"
            // }
          ]
        },
        list4: {
          // title: "其他政府资金",
          // height: "180px",

          data: [
            {
              ZD: 'QTZFZJXJ',
              label: '其他政府性资金',
              size: true
            }
            // {
            //   ZD: "QTZFZJXJ",
            //   label: "小计",
            //   width: 100
            // },
            // {
            //   ZD: "BZJ",
            //   label: "保证金"
            // },
            // {
            //   ZD: "CQPCK",
            //   label: "拆迁赔偿款"
            // },
            // {
            //   ZD: "DJGCK",
            //   label: "代建工程款"
            // },
            // {
            //   ZD: "QTZFZJQT",
            //   label: "其他",
            //   width: 100
            // }
          ]
        }
      },
      tableList1: [],
      modalFlag: '',
      modalTitle: '',
      gettime: '',
      week: '',
      timer: '',
      optModalList: []
      // colorArr: ['#9F2115', '#c1c919', '#37ca61']
    };
  },
  computed: {
    optModal() {
      const newArr = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 图例布局: 垂直
          orient: 'vertical',
          // 图例图标的位置
          align: 'left',
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 12
          },
          // 图例位置
          x: 'right',
          y: 'bottom',
          // 图标
          icon: 'circle',
          padding: [0, 50, 50, 0]
          // backgroundColor: '#fff'
        },
        series: [
          {
            type: 'pie',
            // 饼图的占面积
            radius: '80%',
            center: ['40%', '50%'],
            data: this.optModalList,
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                if (params.value) {
                  return params.value;
                } else {
                  return '';
                }
              },
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#fff'
              }
            }
          }
        ]
      };
      return newArr;
    }
  },
  created() {
    this.getTime();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    gotoArea(val) {
      if (val === 1) {
        this.$router.push('/largeScreen1');
      } else if (val === 2) {
        this.$router.push('/largeScreen2');
      } else if (val === 3) {
        this.$router.push('/largeScreen3');
      } else if (val === 4) {
        this.$router.push('/largeScreen4');
      }
    },
    async openDailg(index) {
      if (index === 0) {
        if (!this.tableHeaderData.list8.data.length) {
          await getReportHeaderByTableId({ tableId: 1021 }).then(res => {
            if (res.success && res.data) {
              res.data = res.data.sort((a, b) => {
                return a.orderId - b.orderId;
              });
              res.data.forEach(item => {
                if (item.display === 1) {
                  if (
                    item.title === '上级项级科目' ||
                    item.title === '上级文号'
                  ) {
                    this.tableHeaderData.list8.data.push({
                      ZD: item.dataIndex,
                      label: item.title
                    });
                  } else {
                    this.tableHeaderData.list8.data.push({
                      ZD: item.dataIndex,
                      label: item.title,
                      width: 120
                    });
                  }
                }
              });
            }
          });
        }
        this.tableList1 = [];
        this.modalTitle = '上级补助资金';
        this.dbclickVisible = true;
        this.modalFlag = 'botleft';
        await getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 1021,
          pageType: 1
        }).then(res1 => {
          if (res1.success && res1.data.length) {
            this.tableList1 = res1.data;
          }
        });
      } else if (index === 1) {
        this.tableList1 = [];
        this.modalTitle = '补助下级';
        this.dbclickVisible = true;
        this.modalFlag = 'botright';

        getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 993,
          pageType: 1
        }).then(res => {
          if (res.success && res.data.length) {
            this.tableList1 = res.data;
          }
        });
      }
    },
    openTopDailg(index) {
      if (index === 0) {
        this.modalTitle = '资金';
        this.modalFlag = 'topleft';
        this.dbclickVisible = true;
        this.modalConTitle = '资金汇总';
        getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 1017,
          pageType: 1
        }).then(res => {
          if (res.success && res.data.length) {
            res.data.forEach(item => {
              if (item.DW === '合计') {
                this.tableList1 = [{ ...item }];
                this.optModalList = [
                  {
                    name: '财政拨款收入',
                    value: item.CZBKSRXJ
                  },
                  {
                    name: '镇街本级收入',
                    value: item.ZJBJSRXJ
                  },
                  {
                    name: '专用资金收入',
                    value: item.ZYJJSRXJ
                  },
                  {
                    name: '其他政府资金',
                    value: item.QTZFZJXJ
                  }
                ];
              }
            });
          }
        });
      } else if (index === 1) {
        this.modalTitle = '资产';
        this.modalFlag = 'topmid';
        this.dbclickVisible = true;
        this.modalConTitle = '资产汇总';
        getQueryBodyByProduce({
          pageIndex: 0,
          pageSize: 100,
          tableId: 1019,
          pageType: 1
        }).then(res => {
          if (res.success && res.data.length) {
            res.data.forEach(item => {
              if (item.ZJ === '合计') {
                this.tableList1 = [{ ...item }];
                this.optModalList = [
                  {
                    name: '设备家具类账面净值',
                    value: item.SBJJLZMJZ
                  },
                  {
                    name: '房产类账面净值',
                    value: item.FCLZMJZ
                  },
                  {
                    name: '土地类帐面净值',
                    value: item.TDLZMJZ
                  },
                  {
                    name: '在建工程类累计已投资额',
                    value: item.ZJGCLLJYTZE
                  },
                  {
                    name: '车辆类帐面净值',
                    value: item.CLLZMJZ
                  },
                  {
                    name: '公共设施类账面净值',
                    value: item.GGSSLZMJZ
                  }
                ];
              }
            });
          }
        });
      }
    },
    dbclickCancel() {
      this.dbclickVisible = false;
    },
    dbclickOk() {
      this.dbclickVisible = false;
    },
    getTime() {
      const yy = new Date().getFullYear();
      const mm = this.getAddO(new Date().getMonth() + 1);
      const dd = this.getAddO(new Date().getDate());
      const hh = this.getAddO(new Date().getHours());
      const mf = this.getAddO(new Date().getMinutes());
      // let ss = this.getAddO(new Date().getSeconds());
      this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf;
      const wk = new Date().getDay();
      const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ];
      this.week = weeks[wk];
      this.timer = setTimeout(() => {
        this.getTime();
      }, 10000);
    },
    getAddO(a) {
      return a < 10 ? '0' + a : a;
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.supervision-center {
  padding: px2vw(20px) 0;
}
.MidTitle {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  /deep/.el-input__inner {
    background: transparent;
    border-color: transparent;
    color: #f6bd16;
    font-size: px2vw(32px);
    width: px2vw(200px);
  }
  span {
    font-size: px2vw(32px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.MidTop {
  height: 8%;
  margin-top: px2vw(42px);
  display: flex;
  justify-content: center;
  position: relative;
  .timeData {
    position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -66%;
    font-size: px2vw(14px);
  }
  .danwei {
    position: absolute;
    color: #1fd2ff;
    right: 10%;
    top: -40%;
    font-size: px2vw(14px);
  }
  .MidtopCon {
    width: 66%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .MidTopBtn {
      width: 32%;
      height: 100%;
      background-image: url("~@/assets/images/fullscreen/MidTop.png");
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      span {
        font-size: px2vw(24px);
        padding-top: 2%;
        font-family: LiquidCrystal, LiquidCrystal-Regular;
        font-weight: 400;
        color: #f6bd16;
        text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
      }
      p {
        margin: 0;
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #1fd2ff;
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
      }
      .MidTopBtn-titleM {
        color: #1fd2ff;
      }
    }
  }
}
.MidMap {
  height: 55%;
  position: relative;
  .mapTitle {
    position: absolute;
    color: #fff;
    font-size: 20px;
    right: 8%;
    bottom: 125px;
  }
  .mapAll {
    display: flex;
    align-items: center;
    position: absolute;
  }
  .mapBox {
    width: px2vw(18px);
    height: px2vw(18px);
    display: inline-block;
    border-radius: 2px;
  }
  span {
    font-size: px2vw(16px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #ffffff;
    margin-left: px2vw(12px);
    display: inline-block;
  }
  .mapBot {
    width: px2vw(185px);
    height: px2vw(144px);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("~@/assets/images/fullscreen/状态球备份.png");
    background-size: 100% 100%;
    span {
      font-size: px2vw(34px);
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #e9d500;
      text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    }
    p {
      margin: 0;
      position: absolute;
      left: 50%;
      bottom: -12%;
      transform: translateX(-50%);
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #1fd2ff;
    }
  }
}

.MipTable {
  height: calc(37% - 87px);
  // background-image: url('~@/assets/images/fullscreen/longKuang.png');
  // background-size: 100% 100%;
  // padding: 10px;
  display: flex;
  justify-content: space-between;
  .title {
    padding-left: 20px;
    height: 10%;
    color: #1fd2ff;
    font-size: px2vw(18px);
  }
}
.dbclickModal /deep/.ant-modal .ant-modal-content {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-header {
  background: #0a1c37;
}
.dbclickModal /deep/.ant-modal-title {
  color: #f6bd16;
}

.dbclickModal /deep/.ant-modal-header {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-footer {
  border-color: #143c6e;
}
.dbclickModal /deep/.ant-modal-close-x {
  color: #f6bd16;
}

.table1Modal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: 100%;
}
.table1Modal1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: 100%;
}
.table1Modal1Left {
  width: 40%;
  height: 100%;
  h1 {
    margin: 0;
    color: #f6bd16;
    text-align: center;
    span {
      font-size: 16px;
    }
  }
}
.table1ModalBot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  height: 70%;
}
.table1Modal1right {
  width: 55%;
}
.ModalItem {
  width: 45%;
}
</style>
